<template>
  <el-dialog width="66%" :title="dialogTitle" v-model="dialogVisible" modal @close="closeDialog" draggable
    :close-on-click-modal="false" :append-to-body="true">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-button type="primary" size="mini" @click="handleChoose">选择盒</el-button>
      </el-col>
    </el-row>
    <el-table :data="archivesData" border style="width: 100%" height="30vh" :row-class-name="tableRowClassName">
      <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
      <el-table-column v-for="item of tableProps" :key="item.props" :prop="item.prop" :label="item.title"
        :width="item.width" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="操作" min-width="60">
        <template slot-scope="{ row }">
          <el-popconfirm title="确定要删除吗？" @confirm="() => handleDel(row)">
            <el-button slot="reference" icon="el-icon-delete" link size="mini" class="danger_button">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="submitForm" size="mini">换 盒</el-button>
    </div>
    <choose-box-dialog ref="chooseBoxDialog" @ok="getBoxNo"></choose-box-dialog>
  </el-dialog>
</template>

<script>
import { add } from '@/api/rfid/boxReplace'
import { capacityStatistics } from '@/api/request'
import chooseBoxDialog from './chooseBoxDialog.vue'
export default {
  name: 'boxReplaceDialog',
  components: { chooseBoxDialog },
  data() {
    return {
      // 容量统计;0：关闭;1：开启
      capacityStatistics: false,
      // 每厘米档案页数
      cmPageNo: 1,
      boxNo: '',
      boxWidth: 0,
      dialogTitle: '',
      dialogVisible: false,
      archivesData: [],
      tableProps: [
        { title: '档号', prop: 'archiveNo', width: '', checked: true },
        { title: '原盒号', prop: 'oldBoxNo', width: '', checked: true },
        { title: '新盒号', prop: 'newBoxNo', width: '', checked: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true },
        { title: '页数', prop: 'pageNo', width: '', checked: true },
      ],
      warningData: [],
    }
  },
  methods: {
    add(record) {
      this.getCapacityStatistics()
      record.forEach((item) => {
        item.oldBoxNo = item.boxNo
        item.newBoxNo = ''
      })
      this.archivesData = JSON.parse(JSON.stringify(record))
      this.formDisabled = false
      this.dialogTitle = '换盒'
      this.dialogVisible = true
    },
    // 查询是否开启容量统计
    getCapacityStatistics() {
      capacityStatistics()
        .then((res) => {
          if (res.data.code === 200) {
            this.capacityStatistics = true
            this.cmPageNo = res.data.data.cmPageNo
          } else {
            this.capacityStatistics = false
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    handleChoose() {
      this.$refs.chooseBoxDialog.init('batch', '')
    },
    handleDel(row) {
      this.archivesData = this.archivesData.filter((item) => item.labelId !== row.labelId)
      if (this.capacityStatistics) {
        if (this.boxWidth > 0) {
          this.warningData = []
          let archiveWidth = 0
          let rowIndex = 0
          this.archivesData.forEach((item) => {
            archiveWidth = archiveWidth + item.pageNo
            if (archiveWidth / this.cmPageNo > this.boxWidth) {
              this.warningData.push(rowIndex)
            }
            rowIndex++
          })
        }
      }
    },
    submitForm() {
      // 判断表格中是否还有数据
      if (this.archivesData.length === 0) {
        this.$message.warning('换盒列表不能为空')
        return
      }
      if (!this.boxNo) {
        this.$message.warning('请选择盒')
        return
      }
      if (this.warningData.length > 0) {
        this.$message.warning('档案盒空间不足，请重新选择档案盒或删除页数较多的档案')
        return
      }
      // 循环archivesData，只取里面的labelId,oldBoxNo,newBoxNo
      const archivesData = this.archivesData.map((item) => {
        return {
          labelId: item.labelId,
          oldBoxNo: item.oldBoxNo,
          newBoxNo: this.boxNo,
        }
      });
      add(archivesData)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success('换盒成功')
            this.closeDialog()
            this.$emit('ok')
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    tableRowClassName({ row, rowIndex }) {
      if (this.warningData.includes(rowIndex)) {
        return 'warning-row'
      }
    },
    getBoxNo(boxInfo) {
      this.boxNo = ''
      this.boxWidth = 0
      this.warningData = []
      // 如果开启容量统计
      if (this.capacityStatistics) {
        this.boxNo = boxInfo.boxNo
        this.boxWidth = boxInfo.boxWidth - boxInfo.pageCount / this.cmPageNo
        let archiveWidth = 0
        let rowIndex = 0
        // 表格中的盒号赋值
        this.archivesData.forEach((item) => {
          item.newBoxNo = boxInfo.boxNo
          archiveWidth = archiveWidth + item.pageNo
          if (archiveWidth / this.cmPageNo > this.boxWidth) {
            this.warningData.push(rowIndex)
          }
          rowIndex++
        })
      } else {
        this.boxNo = boxInfo.boxNo
        this.boxWidth = 0
        this.archivesData.forEach((item) => {
          item.newBoxNo = boxInfo.boxNo
        })
      }
    },
    closeDialog() {
      this.boxNo = ''
      this.warningData = []
      this.dialogVisible = false
    },
  },
}
</script>

<style scoped lang="less">
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
